<template>
<view class="">
	<swiper indicator-dots autoplay class="swiper">
		<swiper-item v-for="item in imgs">
			<view style="height: 100%;">
				<image :src="item" mode="" style="height: 100%; width: 100%;"></image>
			</view>
		</swiper-item>
	</swiper>
	
	<!-- 滚动通知 -->
	<view>
		<uni-notice-bar show-icon scrollable :text="inform" />
	</view>
	
	<view class="list">
			
		<view class="group">
			
			<!-- 商务合作 -->
			<view class="group_item"  @click="cooperation">
				<view class="left">
					<uni-icons type="staff-filled" size="20" color="#c3e129"></uni-icons>
					<text class="text">商务合作</text>
				</view>
				<view class="right"><uni-icons type="right" size="30" color="#a5a5a5"></uni-icons></view>
			</view>		
			
			<!-- 意见反馈 -->
			<navigator url="/pages/feedback/feedback" class="group_item">
				<view class="left">
					<uni-icons type="refresh" size="20" color="#6794ef"></uni-icons>
					<text class="text">意见反馈</text>
				</view>
				<view class="right"><uni-icons type="right" size="30" color="#a5a5a5"></uni-icons></view>
			</navigator>
			
			<!-- 关于 -->
			<navigator url="/pages/about/about" class="group_item">
				<view class="left">
					<uni-icons type="help" size="20" color="#f38256"></uni-icons>
					<text class="text">关于</text>
				</view>
				<view class="right"><uni-icons type="right" size="30" color="#a5a5a5"></uni-icons></view>
			</navigator>		

		</view>	
	</view>
	
	<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0">
		<view class="popup-box">
			<view class="popup-title" >
				<image class="popup-avatar" src="../../static/consult/avatar.png"></image>
				<view class="popup-text" >
					<span>周主任</span>
					<span style="color: #757575;">海南政枫商务咨询服务有限公司</span>
					
				</view>
			</view>
			<view style="background-color: #fff; display: flex; justify-content: center; align-items: center; padding: 10rpx 0; " @click="callPhone">
				<span style="width: fit-content; color: #000;font-weight: 600; padding: 10rpx 0;">咨询电话：13136018388</span>
				<uni-icons style="margin-left: 10px;" type="phone"></uni-icons>
			</view>
			<view class="code-box">
				<image class="code" src="../../static/consult/wxCode.png"  show-menu-by-longpress></image>
				<view class="hint" >
					扫描二维码或长按识别
				</view>
			</view>
		</view>
	</uni-popup>
</view>
</template>

<script setup>
import { ref } from 'vue';
// 轮播图
const imgs = [
	'../../static/zf/one.jpg', '../../static/zf/two.jpg', '../../static/zf/three.jpg'
]

// 滚动通知数据 
const inform = ref('政枫商务有限公司期待与你的合作！与你携手共创未来~'); 

let popup = ref(null)

const cooperation = ()=>{
	popup.value.open()
}

const call = ()=>{
	uni.makePhoneCall({
		phoneNumber: 13136018388
	})
}
const previewImage=()=> {
	uni.previewImage({
		current:'1',
		urls: ['../../static/consult/wxCode.png'],
		success: res => {
			console.log('previewImage res', res);
		},
		fail: err => {
			console.log('previewImage err', err);
		}
	});
}
</script>

<style lang="scss" scoped>
	.list{
		.group{
			padding:15rpx 30rpx;
			border-bottom:15rpx solid #f4f4f4;
			.group_item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:25rpx 0;
				font-size: 36rpx;
				color:#555;
				border-bottom:2rpx solid #f1f1f1;
				.left{
					display: flex;
					align-items: center;
					.iconfont{
						font-size: 38rpx;
						margin-right: 10rpx;
					}
					.text{
						margin-left: 10rpx;
					}
				}
				.right{
					.iconfont{
						font-size: 26rpx;
					}
				}
			}
			.group_item:last-child{
				border: none;
			}
		}
		.group:last-child{
			border:none;
		}
	}
	
	.popup-box{
		border-radius: 10rpx;
		overflow: hidden;
		font-size: 20rpx;
		.popup-title{
			display: flex;
			align-items: center;
			background-image:linear-gradient(120deg,#84fab0 0%, #8fd3f4 100%);
			padding:30rpx 20rpx;
			.popup-avatar{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.popup-text{
				display: flex;
				flex-direction: column;
			}
		}
		.code-box{
			padding: 20rpx;
			padding-top: 0;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.code{
				width: 300rpx;
				height: 300rpx;
			}
			.hint{
				margin-top: 10rpx;
				color: #999;
			}
		}
		
	}
	

</style>
